// Copyright (C) 2020-2022 Intel Corporation
// Copyright (C) 2023-2024 CVAT.ai Corporation
//
// SPDX-License-Identifier: MIT

import React from 'react';
import { Col } from 'antd/lib/grid';
import Icon, { StopOutlined, CheckCircleOutlined, LoadingOutlined } from '@ant-design/icons';
import Modal from 'antd/lib/modal';
import Button from 'antd/lib/button';
import Text from 'antd/lib/typography/Text';

import AnnotationMenuComponent from 'components/annotation-page/top-bar/annotation-menu';
import { UndoIcon, RedoIcon } from 'icons';
import { ActiveControl, ToolsBlockerState } from 'reducers';
import CVATTooltip from 'components/common/cvat-tooltip';
import customizableComponents from 'components/customizable-components';
import GlobalHotKeys, { KeyMap } from 'utils/mousetrap-react';
import { Divider } from 'antd';
import { AnnotationStatus, JobStatusEnum } from 'typings/annotion/task';
import { useParams } from 'react-router-dom-v5-compat';
import useTask from './useTask';

interface Props {
    saving: boolean;
    undoAction?: string;
    redoAction?: string;
    undoShortcut: string;
    redoShortcut: string;
    drawShortcut: string;
    switchToolsBlockerShortcut: string;
    toolsBlockerState: ToolsBlockerState;
    activeControl: ActiveControl;
    keyMap: KeyMap;
    onSaveAnnotation(): void;
    onUndoClick(): void;
    onRedoClick(): void;
    onFinishDraw(): void;
    onSwitchToolsBlockerState(): void;
}

function LeftGroup(props: Props): JSX.Element {
    const {
        saving,
        keyMap,
        undoAction,
        redoAction,
        undoShortcut,
        redoShortcut,
        drawShortcut,
        switchToolsBlockerShortcut,
        activeControl,
        toolsBlockerState,
        onSaveAnnotation,
        onUndoClick,
        onRedoClick,
        onFinishDraw,
        onSwitchToolsBlockerState,
    } = props;
    const { approval } = useTask();
    const params = useParams();
    const jobStatus = approval.taskImageInfo.subTaskStatus as AnnotationStatus;

    const includesDoneButton = [
        ActiveControl.DRAW_POLYGON,
        ActiveControl.DRAW_POLYLINE,
        ActiveControl.DRAW_POINTS,
        ActiveControl.AI_TOOLS,
        ActiveControl.OPENCV_TOOLS,
    ].includes(activeControl);

    const includesToolsBlockerButton =
        [ActiveControl.OPENCV_TOOLS, ActiveControl.AI_TOOLS].includes(activeControl) && toolsBlockerState.buttonVisible;

    const shouldEnableToolsBlockerOnClick = [ActiveControl.OPENCV_TOOLS].includes(activeControl);
    const SaveButtonComponent = customizableComponents.SAVE_ANNOTATION_BUTTON;

    const subKeyMap = {
        UNDO: keyMap.UNDO,
        REDO: keyMap.REDO,
    };

    const handlers = {
        UNDO: (event: KeyboardEvent | undefined) => {
            event?.preventDefault();
            if (undoAction) {
                onUndoClick();
            }
        },
        REDO: (event: KeyboardEvent | undefined) => {
            event?.preventDefault();
            if (redoAction) {
                onRedoClick();
            }
        },
    };

    return (
        <>
            <GlobalHotKeys keyMap={subKeyMap} handlers={handlers} />
            {saving && (
                <Modal open destroyOnClose className='cvat-saving-job-modal' closable={false} footer={[]}>
                    <Text>CVAT is saving your annotations, please wait </Text>
                    <LoadingOutlined />
                </Modal>
            )}
            <Col className='flex items-center pl-32px'>
                {/* <Col className='cvat-annotation-header-left-group'> */}
                {/* <AnnotationMenuComponent /> */}
                <span className='font-bold text-xl'>数据标注</span>
                {[JobStatusEnum.WAITING_ANNOTATION, JobStatusEnum.FIRST_REVIEW_REJECTED].includes(jobStatus) &&
                    params.action === 'annotation' && (
                        <div className='flex items-center'>
                            <Divider type='vertical' className='!mx-4 h-20px' />
                            <SaveButtonComponent
                                isSaving={saving}
                                onClick={saving ? undefined : onSaveAnnotation}
                                type='text'
                            />
                            <Divider type='vertical' className='!mx-4 h-20px' />
                            <CVATTooltip overlay={`Undo: ${undoAction} ${undoShortcut}`}>
                                <Button
                                    style={{
                                        pointerEvents: undoAction ? 'initial' : 'none',
                                        opacity: undoAction ? 1 : 0.5,
                                    }}
                                    type='text'
                                    onClick={onUndoClick}
                                >
                                    <Icon component={UndoIcon} />
                                </Button>
                            </CVATTooltip>
                            <CVATTooltip overlay={`Redo: ${redoAction} ${redoShortcut}`}>
                                <Button
                                    style={{
                                        pointerEvents: redoAction ? 'initial' : 'none',
                                        opacity: redoAction ? 1 : 0.5,
                                    }}
                                    type='text'
                                    onClick={onRedoClick}
                                >
                                    <Icon component={RedoIcon} />
                                </Button>
                            </CVATTooltip>
                            {includesDoneButton ? (
                                <CVATTooltip overlay={`Press "${drawShortcut}" to finish`}>
                                    <Button type='text' onClick={onFinishDraw}>
                                        <CheckCircleOutlined />
                                        完成
                                    </Button>
                                </CVATTooltip>
                            ) : null}
                        </div>
                    )}
                {/* {includesToolsBlockerButton ? (
                    <CVATTooltip overlay={`Press "${switchToolsBlockerShortcut}" to postpone running the algorithm `}>
                        <Button
                            type='link'
                            className={`cvat-annotation-header-block-tool-button cvat-annotation-header-button ${
                                toolsBlockerState.algorithmsLocked ? 'cvat-button-active' : ''
                            }`}
                            onClick={shouldEnableToolsBlockerOnClick ? onSwitchToolsBlockerState : undefined}
                        >
                            <StopOutlined />
                            Block
                        </Button>
                    </CVATTooltip>
                ) : null} */}
            </Col>
        </>
    );
}

export default React.memo(LeftGroup);
